<template>
  <m-layout type="primary">
    <mt-header slot="header" title="学员点名" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="named">
      <div class="calendar">
         <m-calendar-range v-model="calendarRangeValue" :shortcuts="shortcuts" @change="changedate" />
      </div>
      <m-section>
        <e-heading>学员出勤</e-heading>
        <div class="chart">
          <div class="students">
            <vm-progress
            type="circle"
            :percentage="parseInt(singCountData.signNum/singCountData.signAll*100) || 0"
            :striped="true"
            stroke-color="#ff8e00"
            :stroke-width="10"
            ></vm-progress>
            <p>出勤总人数</p>
          </div>
          <div class="course">
            <vm-progress
            type="circle"
            :percentage="singCountData.percentum"
            :striped="true"
            stroke-color="#4192f3"
            :stroke-width="10"
            ></vm-progress>
            <p>全勤课程</p>
          </div>
        </div>
      </m-section>
      <m-section :border-bottom="false">
        <e-heading>课程统计</e-heading>
        <div class="courseList" v-if="courseArr.length"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            :infinite-scroll-immediate-check="true"
        >
            <mt-cell
            :title="item.subjectName"
            :label="`${item.schoolName}  销课${item.signNum}/应到${item.signAll}`"
            is-link
            v-for="(item,index) in courseArr"
            :key="index"
            :to="nextUrl(item)"
            class="item"></mt-cell>
        </div>
        <e-placeholder text="暂无课程" v-else/>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
// import { mapState } from 'vuex'
import api from 'api/named'
import MCalendarRange from '@/views/components/CalendarRange'
import VmProgress from 'vue-multiple-progress'
export default {
  components: {
    MCalendarRange,
    VmProgress
  },
  data () {
    return {
      calendarRangeValue: [new Date(), new Date()],
      singCountData: {
        percentum: 0,
        signAll: 1,
        signNum: 0
      },
      courseArr: [],
      total: 0,
      shortcuts: [
        {
          label: '今日',
          value () {
            let now = new Date()
            return [new Date(now.getFullYear(), now.getMonth(), now.getDate()), new Date(now.getFullYear(), now.getMonth(), now.getDate())]
          }
        },
        {
          label: '昨日',
          value () {
            let now = new Date()
            now.setDate(now.getDate() - 1)
            return [new Date(now.getFullYear(), now.getMonth(), now.getDate()), new Date(now.getFullYear(), now.getMonth(), now.getDate())]
          }
        },
        {
          label: '本周',
          value () {
            let now = new Date()
            let day = now.getDay()
            let start = new Date(now.getTime() - 86400000 * (day - 1))
            let end = new Date(now.getTime() + 86400000 * (7 - day))
            return [new Date(start.getFullYear(), start.getMonth(), start.getDate()), new Date(end.getFullYear(), end.getMonth(), end.getDate())]
          }
        },
        {
          label: '上周',
          value () {
            let now = new Date()
            let day = now.getDay()
            let start = new Date(now.getTime() - 86400000 * (day + 6))
            let end = new Date(now.getTime() - 86400000 * day)
            return [new Date(start.getFullYear(), start.getMonth(), start.getDate()), new Date(end.getFullYear(), end.getMonth(), end.getDate())]
          }
        },
        {
          label: '本月',
          value () {
            let now = new Date()
            let year = now.getFullYear()
            let month = now.getMonth()
            return [new Date(year, month, 1), new Date(month === 11 ? year + 1 : year, month === 11 ? 0 : month + 1, 0)]
          }
        },
        {
          label: '上月',
          value () {
            let now = new Date()
            let year = now.getFullYear()
            let month = now.getMonth()
            return [new Date(month === 0 ? year - 1 : year, month === 0 ? 11 : month - 1, 1), new Date(year, month, 0)]
          }
        }
      ],
      rows: 15,
      page: 1,
      loading: false
    }
  },
  computed: {
    // ...mapState({
    //   courseArr: state => state.named.lessonCount
    // }),
    beginTime () {
      if (!this.calendarRangeValue[0]) {
        return ''
      } else {
        let start = this.calendarRangeValue[0]
        // return `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`
        return new Date(start).format('yyyy-MM-dd')
      }
    },
    endTime () {
      if (!this.calendarRangeValue[1]) {
        return ''
      } else {
        let end = this.calendarRangeValue[1]
        // return `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
        return new Date(end).format('yyyy-MM-dd')
      }
    }
  },
  methods: {
    // 修改时间
    changedate () {
      this.courseArr = []
      this.page = 1
      this.singCount()
      this.lessonCount()
    },
    // 下拉刷新
    loadMore () {
      if (this.courseArr.length >= this.total) {
        this.loading = true
        return false
      }
      this.lessonCount()
    },
    // 学员考勤
    singCount () {
      api.singCount({
        // orgUserId: 'seedp543381',
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then((res) => {
        this.singCountData = res.data
      }).catch(() => {})
    },
    // 课程统计
    lessonCount () {
      api.lessonCount({
        // orgUserId: 'seedp543381',
        beginTime: this.beginTime,
        endTime: this.endTime,
        rows: this.rows,
        page: this.page
      }).then((res) => {
        this.total = res.data.total
        this.courseArr = res.data.list
        this.page += 1
        // this.$store.commit('named/LESSONCOUNT', res.data.list)
      }).catch(() => {})
    },
    nextUrl (item) {
      return `/named/lesson?classId=${item.classId}&teacherId=${item.teacherId}&properties=${item.properties}&beginTime=${this.beginTime}&endTime=${this.endTime}`
    }
  },
  mounted () {
    this.singCount()
    this.lessonCount()
  }
}
</script>
<style lang="scss">
.students{
  .vm-progress__text{
    color: #fe9715;
  }
}
.course{
  .vm-progress__text{
    color: #4192f3;
  }
}
</style>

<style lang="scss" scoped>
  .calendar{
    text-align: center;
  }
  .named{
    .chart{
      overflow: hidden;
      .students,.course{
        width: 50%;
        float: left;
        text-align: center;
        font-size: $font-size-small;
      }
      .circle{
        margin: auto;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border:8px solid #fe9715;
      }
    }
    .courseList{
      margin-top: 0.2rem;
      padding: 0 0.2rem;
      .item{
        margin-bottom: 0.1rem;
        // border-bottom: 1px solid $border-color-base;
        padding-bottom: 0.1rem;
        }
      }
    }
</style>
